<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <link href="../css/base.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/easy-upload.css">
    <link rel="stylesheet" href="../css/metroStyle.css" type="text/css">
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../js/jquery.ztree.exedit.js"></script>
    <script src="../js/template.js"></script>
    <script src="../js/easyUpload.js"></script>
    <script src="../js/paging.js"></script>
    <!--<script src="../js/poolMana.js"></script>-->
    <title>Title</title>

</head>
<body>
<input id="test" type="file" multiple="multiple"/>
<video id="video" controls="" style="display: none;">

</video>

<!--<video id="video" controls="controls">
    <source src="../img/2.mp4">
</video>-->
<div id="output" style="display:none"></div>
<script type="text/javascript">
    $(function () {
        $("#test").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            $("#video").attr("src", objUrl);
            /* $("#video")[0].play();
             $("#video").show();*/
            getTime();

                (function(){
                    var video, output;
                    var scale = 0.8;
                    var initialize = function() {
                        output = document.getElementById("output");
                        video = document.getElementById("video");
                        video.addEventListener('loadeddata',captureImage);
                    };

                    var captureImage = function() {
                        var canvas = document.createElement("canvas");
                        canvas.width = video.videoWidth * scale;
                        canvas.height = video.videoHeight * scale;
                        canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
                        output.innerHTML = "";
                        var img = document.createElement("img");
                        img.src = canvas.toDataURL("image/png");
                        output.appendChild(img);
                    };

                    initialize();

                })();


        });
    })

    <!--获取mp3文件的时间 兼容浏览器-->
    function getTime() {
        setTimeout(function () {
            var duration = $("#video")[0].duration;
            if(isNaN(duration)){
                getTime();
            }
            else{
                console.info("该歌曲的总时间为："+$("#video")[0].duration+"秒");
            }
        }, 10);
    }
    <!--把文件转换成可读URL-->
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

</script>
</body>
</html>